<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .main_center {
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .a > a {
            text-decoration: none;
            color: black;
        }

        a:hover {
            color: #ff5c68
        }

        .column {
            flex: 1;
            padding: 10px;
        }

        .container {
            display: flex;
        }

        .custom-divider {
            position: relative;
            margin: auto 100px auto auto;
            height: 300px; /* 设置垂直分割线的长度 */
            background-color: #ccc;
        }

        /*头*/
        .center {
            width: 1550px;
            margin: 0 auto

        }

        body {

        }

        blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 0;
        }

        .el-header {
            background-color: white;
            line-height: 72px;
        }

        a:hover {
            color: #ff5c68
        }

        header a {
            margin: 10px;
            text-decoration: none;
            font-size: 16px;
            color: black;
        }

        .input-search {
            width: 200px;
            height: 51px;
            /*position: absolute;*/
            /*left: 0;*/
            /*top: 0;*/
            font-size: 14px;
            background-color: transparent;
            outline: 0;
            -webkit-appearance: none;
            padding: 0 10px 0 54px;
            border-top-left-radius: 46px;
            border-bottom-left-radius: 46px;
            border: 1px solid #f8f8f8;
            /*background-color: #f8f8f8;*/
            border-right-color: #FF1268;
            box-sizing: content-box;
        }

        .button-search {
            width: 82px;
            height: 100%;
            /*position: absolute;*/
            right: 0;
            top: 0;
            background: #FF1268;
            line-height: 46px;
            font-size: 16px;
            text-align: center;
            color: #FFF;
            border-radius: 0 27px 27px 0;

            letter-spacing: 4px;
            cursor: pointer;
        }

        /*脚*/
        .footer_links {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 36px 0;
            text-align: center;
            zoom: 1;
        }

        li, ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer_links_list {
            float: left;
            font-size: 13px;
            margin-left: 10px;
            margin-right: 10px;
            color: #111;
        }

        footer a {
            text-decoration: none;
            color: black;
        }

        .footer_r_1 {
            zoom: 1;
            padding-bottom: 10px;
        }

        .footer_r_1_a {
            float: left;
            display: block;
            width: 98px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            background-color: #ff1268;
            color: #fff;
            font-size: 14px;
            border-radius: 20px;
        }

        .footer_r_words {
            padding-bottom: 6px;
        }

        .footer_r_words_word {
            float: left;
            font-size: 13px;
            color: #111;

        }

        .footer_r_words_line {
            float: left;
            padding: 0 15px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--头-->
        <el-header height="72px" style="border: 1px solid #f4f4f4">
            <div class="center">
                <el-row gutter="20">
                    <el-col span="2">
                        <img src="imgs/首页log1.jpg" style="width: 92px ;height:41px ;margin-top: 20px ;float: left">
                    </el-col>
                    <el-col span="4">
                        <i class="el-icon-location-outline"></i>
                        合肥
                        <i class="i-arrow-location"></i>
                    </el-col>
                    <el-col span="6">
                        <a href="Index.html">首页</a>
                        <a href="">分类</a>
                    </el-col>
                    <el-col span="8">
                        <input class="input-search" placeholder="搜索明星、演出">
                        <button class="button-search">搜索</button>
                    </el-col>
                    <el-col span="2" style="margin-bottom: 20px">
                        <el-popover placement="top-start" trigger="hover">
                            <div slot="reference">
                                <i style="font-size: 30px; position:relative;top: 20px"
                                   class="el-icon-user"></i>
                            </div>
                            <a>个人信息</a><br>
                            <hr>
                            <a>账号设置</a><br>
                            <hr>
                            <a>订单管理</a><br>
                            <hr>
                            <a>退出登录</a><br>
                        </el-popover>
                    </el-col>
                    <el-col span="2" style="margin-bottom: 20px">
                        <el-popover placement="top-start" trigger="hover">
                            <div slot="reference">
                                <i style="font-size: 30px; position:relative;top: 20px"
                                   class="el-icon-mobilephone"></i>
                                下载
                            </div>
                            <img src="imgs/二维码.jpg" width="50px" height="50px">
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <!--身体-->
        <el-main class="main_center">
            <div style="width: 1300px;margin: 0 auto">
            <span class="a" style="margin-right: 1000px;">
                <a href="index.html">首页</a> >
                <a href="user_info.html">我的大麦</a> >
                <a href="">订单管理</a> >
                <span style="color: #999999">订单编号：45678916855454</span>
                <hr style="color: #cccccc">
            </span>
                <p style="font-size: 14px;margin-bottom: 25px">订单号:</p>
                <span style="font-size: 32px;">交易关闭</span>
                <span style="font-size: 15px;margin-left: 20px;">支付超时：已关闭交易</span>
                <span style="font-size: 15px;margin-left: 830px;">需付款：</span>
                <span style="font-size: 32px;">￥410</span>

                <div>
                    <template>
                        <el-table :data="tableData" >
                            <el-table-column label="项目详情" width="420px" hight="350px" v-for="t in tableData">
                                <div>
                                    <a href="buysuccess.html" class="table_img" style=" text-decoration: none;">
                                        <img style="position: relative;bottom: 5px; float: left" :src="t.imgUrl" width="140px" height="180px">
                                        <h3  style="position: relative;left:30px;color: black;font-size: 13px">【新加坡站】蔡徐坤KUN 2023 <br>「迷」WORLD TOUR IN SINGAPORE
                                        </h3>
                                    </a>
                                    <p style="font-size: 10px;color: #4a4a4a; position: relative;left: 30px;font-size: 10px">时间：2023.07.15 周六 20:00</p>
                                    <p style="font-size: 10px;color: #4a4a4a;position: relative;left: 30px;font-size: 10px">地点：新加坡金沙会议展览中心第五层<br>金沙大宴会厅</p>
                                </div>
                            </el-table-column>
                            <el-table-column prop="seat" label="座位信息" width="180"></el-table-column>
                            <el-table-column prop="price" label="单价"></el-table-column>
                            <el-table-column prop="num" label="数量"></el-table-column>
                            <el-table-column prop="favourable" label="优惠"></el-table-column>
                            <el-table-column prop="subtotal" label="小计"></el-table-column>
                        </el-table>
                    </template>
                </div>
                <el-divider content-position="left"></el-divider>
                <div>
                    <el-card style="border: 1px solid  white;">
                        <div class="container">
                            <el-row class="column">
                                <!-- 第一列的内容 -->
                                <el-col span="8" style="margin: auto; width: 100%">
                                    <p style="font-weight: bold">配送信息</p>
                                    <p style="margin-top: 20px">配送方式: 快递票</p>
                                    <p style="margin-top: 20px">收货地址: 安徽省合肥市瑶海区</p>
                                    <p style="margin-top: 20px">收货人: 李煜</p>
                                    <p style="margin-top: 20px">手机号: 138****3214</p>
                                </el-col>
                            </el-row>
                            <el-divider direction="vertical" class="custom-divider"></el-divider>
                            <el-row class="column">
                                <!-- 第二列的内容 -->
                                <el-col span="8" style="margin:  auto; width: 100%">
                                    <p style="font-weight: bold">订单信息</p>
                                    <p style="margin-top: 20px">订单编号: 45678916855454</p>
                                    <p style="margin-top: 20px">创建时间: 2023.07.20 15:35:20</p>
                                </el-col>
                            </el-row>
                            <el-divider direction="vertical" class="custom-divider"></el-divider>
                            <el-row class="column">
                                <!-- 第三列的内容 -->
                                <el-col span="8" style="margin: auto; width: 100%">
                                    <p style="font-weight: bold">金额明细</p>
                                    <p style="margin-top: 20px">商品总价: ¥398.00</p>
                                    <p style="margin-top: 20px">店铺优惠: ¥6.00</p>
                                    <p style="margin-top: 20px">运费: ¥18.00</p>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </div>
                <div style="margin-top: 10px">
                    <el-card style="border: 1px solid  white">
                        <el-row>
                            <el-col span="24" style="margin: 20px auto">
                                <p style="font-weight: bold">购票人</p>
                                <p>购票人姓名: 赵匡胤</p>
                                <p>证件类型: 身份证</p>
                                <p>证件号码: 3412************024X</p>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

            </div>
        </el-main>

        <!--脚-->
        <el-footer style="background-color: #f8f8f8;height: 280px; margin:0 auto;width: 100%;">
            <div class="center" style="color: #666;width: 1200px">
                <div style="height: 80px;line-height:15px;margin: 0 ">
                    <ul class="footer_links">
                        <li class="footer_links_list"><a href="">帮助中心</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">公司介绍</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">品牌识别</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">公司大事记</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">协议及隐私政策</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">廉政举报</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">联系合作</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">招聘信息</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">防骗秘籍</a></li>

                    </ul>
                </div>
                <div style="height: 172px;margin: 10px ">
                    <el-row gutter="20">
                        <el-col span="8">
                            <img src="imgs/首页log1.jpg" style="width:167px;height: 60px ;margin:15px">
                            <img src="imgs/二维码.jpg" style="width:87px;height: 87px;margin-right:30px">
                        </el-col>
                        <el-col span="16">
                            <div class="footer_r_1">
                                <a href="" class="footer_r_1_a">在线客服</a>
                            </div>
                            <br>


                            <ul class="footer_r_words">
                                <li class="footer_r_words_word">
                                    <a href="">京ICP证031057号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">京ICP备11043884号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">京公网安备11010502037341号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">广播电视节目制作经营许可证(京)字第02253号</a>
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    <a href="">网络文化经营许可证 京网文[2023]1649-054号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">营业性演出许可证京市演587号</a>
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    北京大麦文化传媒发展有限公司 版权所有大麦网Copyright 2003-2020 All Rights Reserved
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    举报投诉：damai_tousu@member.alibaba.com 浙江省杭州市余杭区文一西路969号
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    违法不良信息举报电话：020-62108294
                                </li>
                            </ul>
                            <br>
                            <img src="imgs/首页电子执照.jpg " style="width: 100px;height: 30px ;float:left">
                            <img src="imgs/首页pci.jpg" style="width: 57px;height:30px ;float:left">
                            <img src="imgs/首页log1.jpg" style="width: 45px;height: 30px ;float:left">
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-footer>

    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入外部js文件-->
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [{
                    "imgUrl": "imgs/新加坡蔡徐坤.jpg",
                    seat: '暂无座位信息',
                    price: '￥398.00',
                    num: '1',
                    favourable: '-',
                    subtotal: '￥398.00',
                }]
            }
        },
        methods: {}
    })
</script>
</html>